<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    padding: 0;
    margin: 0;
        }

    ul li {
    list-style: none;
        }

a {
    text-decoration: none;
}

.top {
    width: 100%;
    height: 1100px;
    /* background-color: palegoldenrod; */
    overflow: hidden;
}

.top-box {
    width: 1200px;
    height: 50px;
    /* background-color: paleturquoise; */
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
}

.box-l {
    width: 100px;
    height: 80px;
    line-height: 80px;
}

.box-banner {
    width: 350px;
    height: 40px;
    margin-top: 15px;
    display: flex;
    border: 1px solid #333;
    border-radius: 24px;
    justify-content: space-around;
    background-color: rgb(211, 213, 213);
}

.box-banner .home,
.saerch,
.Movies {
    width: 100px;
    height: 30px;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
    margin-top: 5px;
}

.box-banner .home:hover,
.box-banner .Movies:hover,
.box-banner .saerch:hover {
    border: 1px solid #333;
    border-radius: 24px;
    background-color: #fff;
}

.box-r {
    width: 150px;
    height: 50px;
    margin-top: 15px;
    position: relative;
}

.box-r  img {
    width: 20px;
    position: absolute;
    right: 120px;
    top:10px;
}

.box-r input span {
    line-height: 50px;
}

.box-r .inputku {
    width: 100px;
    height: 40px;
    border-radius: 24px;
    border: 1px solid #333;
}

.box-r input {
    width: 60px;
    height: 30px;
   /* background-color: palegoldenrod; */
    padding-left: 5px;
    box-sizing: border-box;
    position: absolute;
    top: 5px;
    right: 60px;
    border: none;
    outline: none;
}

.box-r .user img {
   height: 20px;
    position: absolute;
    right:15px;
   
}

.box-one {
    width: 1200px;
    height: 900px;
    /* background-color: paleturquoise; */
    margin: 20px auto;
    /* display: flex; */
    /* justify-content: center; */
    position: relative;
}

.box-one img {
    width: 220px;
    height: 100px;
    margin: 0 auto;
    display: block;
}

.box-one .text,
form {
    text-align: center;
    margin-top: 10px;
    
}

.box-one .saerch {
    width: 1000px;
    height: 50px;
    border: 1px solid #333;
    border-radius: 24px;
    margin: 0 auto;
}

.box-one .saerch img {
    width: 25px;
    position: absolute;
    left: 120px;
    top: 117px;
}

.box-one input {
    width: 900px;
    height: 30px;
    padding-left: 20px;
    box-sizing: border-box;
    border: none;
    outline: none;
    margin: 10px auto;
}

.box-one .zy {
    display: block;
    margin: 10px auto;
    width: 80px;
    height: 50px;
    background-color: black;
    color: white;
    padding-right: 17px;
    box-sizing: border-box;
    margin-bottom: 100px;
    border-radius: 24px;
}

.box-tow  h3 {
    font-size: 35px;
    text-align: center;
    margin-bottom: 10px;
}

.box-tow p {
    text-align: center;
    font-size: 18px;
    /* margin-bottom: 10px; */
}
.box-tow .box-flix {
    border: 1px solid #838181;
    border-radius: 24px;
    width: 1000px;
    height: 120px;
    margin: 40px auto 100px;
    position: relative;
}

.box-cat {
    position: absolute;
    left: 20px;
    top: 20px;
}

.cat {
    position: absolute;
    top: 60px;
    left: 15px;
}

.box-three img {
    /* text-align: center;
    font-size: 30px; */
    width: 120px;
    margin-bottom: 10px;
}

.box-three .box-a {
    display: flex;
    justify-content: space-between;
    width: 440px;
    height: 20px;
    /* background-color: palegreen; */
    margin: 0 auto;
  
}

.box-a div a {
    display: block;
    height: 20px;
    color: #000;
}

.box-three .box-b {
    display: flex;
    justify-content: space-between;
    width: 550px;
    height: 30px;
    margin: 15px auto;
}


.box-b a {
    display: block;
    height: 30px;
    color: #8d8b8b;
}
    </style>
</head>
<body>
    <div class="top">
        <div class="top-box">
            <div class="box-l">
                <!-- <span>catflix</span> -->
                 <div>
                    <img src="./img/catflix.svg" alt="">
                 </div>
            </div>
            <div class="box-banner">
                <div class="home">
                    <img src="./img/home.svg" alt="">
                    Home</div>
                <div class="Movies">
                    <img src="./img/movies.svg" alt="">
                    Movies</div>
                <div class="saerch">
                    <img src="./img/tv.svg" alt="">
                    Series</div>
            </div>
            <div class="box-r">
                <img src="./img/ss.svg" alt="">
                <div class="inputku">
                <input type="text" placeholder="saerch">
                </div>
                <div class="user">
                <img src="./img/user.svg" alt="">
            </div>
            </div>
        </div>
    
    <div class="box-one">
        <!-- <h2>catflix</h2> -->
        <img src="./img/catflix.svg" alt="">
        <div class="text">免费在线观看电影</div>
        <form action="">
            <div class="saerch">
                <img src="./img/ss.svg" alt="">
                <input type="text" placeholder="search">
            </div>
            <input type="button" value="主页" class="zy">
        </form>
    
        <div class="box-tow">
            <h3>常见问题解答</h3>
            <p>浏览我们的常见问题，获取有关使用我们的流媒体服务 （从订阅详情信息到故障排除）的快速</p>
            <p>解答。获得您所需帮助，轻松欣赏您喜爱的电影和节目</p>
            <div class="box-flix">
                <p class="box-cat">什么是catflix?</p>
                <p class="cat">catflix是一个提供各种电影和电视剧的流媒体平台。通过我们，您可以随时随地在任何设备上免费享受令人兴奋的高质量内容。</p>
            </div>
        </div>
        <div class="box-three">
            <!-- <h3>catflix</h3> -->
             <img src="./img/catflix.svg" alt="">
            <div class="box-a">
                <div> <a href="#">Home</a></div>
                <div> <a href="#">Movies</a></div>
                <div><a href="#">Series</a></div>
                <div> <a href="#">Searsh</a></div>
                <!-- <ul>
                    <li>Home</li>
                    <li>Movies</li>
                    <li>Series</li>
                    <li>Searsh</li>
                </ul> -->
            </div>
            <div class="box-b">
                <div><a href="#">Distv+2023</a></div>
                <div><a href="#">Home</a></div>
                <div><a href="#">Movies</a></div>
                <div><a href="#">Series</a></div>
                <div><a href="#">Searsh</a></div>
                <!-- <ul>
                    <li>Distv+2023</li>
                    <li>Home</li>
                    <li>Movies</li>
                    <li>Series</li>
                    <li>Searsh</li>
                </ul> -->
            </div>
        </div>
    </div>
</div>
</body>
</html>